<template>
  <div class="about ">
    <div v-if="routeAdcode==cityListStore.showCity.adcode" class="about-content">
      <div class="about-title font-white">你正在预览{{cityListStore.showCity.name}}的天气，可以通过右上角的"+"按钮保存起来</div>
      <div class="about-info padding-20 font-white">
        <div>当前气温是：{{ cityListStore.showCity.weather.temperature_float }}摄氏度</div>
        <div>当前天气是：{{ cityListStore.showCity.weather.weather }}</div>
        <div>当前风向是：{{cityListStore.showCity.weather.winddirection }}风</div>
        <div>当前风力是：{{ cityListStore.showCity.weather.windpower }}级</div>
      </div>
      <div class="padding-20"><WeatherBox :weatherData="cityListStore.showCityWeather" /></div>
      <Teleport to=".protect-detail" style="width: 100%;height: 150px;" >
        <div class="about-save font-white" @click="saveCity" :style="{display:ShowInList?'none':'block'}">+</div>
      </Teleport>
    </div>
    <div v-else class="font-white about-title">请返回首页重新查询</div>
  </div>
</template>

<style lang="scss" scoped>
.about-title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 16px;
    padding: 10px;
    background-color: rgb(0, 78, 113);
    box-sizing: border-box;
  }
.about-content {
  
 .about-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    padding: 20px;
    border-bottom: 1px solid #ccc;
    div{
      font-size: 16px;
      padding: 10px;
    }

 }
}
.about-save{
  margin-left:10px;
  cursor: pointer;
  font-size: 50px;
  margin-top: -7px;
  transition: all 0.6s ease;
  &:hover{
    color: #51504f;
  }
}
</style>

<script setup>
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { useCityListStore } from '@/stores/CityList'
  import WeatherBox from '@/components/WeatherBox.vue';
const route = useRoute()
const routeAdcode = route.params.adcode
const cityListStore = useCityListStore()
//console.log(showCity)
const ShowInList=ref(false)
cityListStore.cityList.forEach(item=>{

  if(item.adcode==routeAdcode){
    ShowInList.value=true
    //console.log(ShowInList.value)
  }
})
function saveCity(){
  cityListStore.addCityList()
  ShowInList.value=true
  console.log(cityListStore.cityList)
}
</script>